<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <p>{{ name }}</p>
    <button @click="tipInfo">点我提示信息(不传参)</button>
    <button @click="tipInfo2($event,'hello')">点我提示信息(传参)</button>
    <!-- 阻止默认事件 -->
    <a href="http://www.baidu.com" @click.prevent="tipInfo">点我提示信息</a>
    <!-- 阻止事件冒泡 -->
    <div  @click="tipInfo">
        <button @click.stop="tipInfo">点我提示信息</button>
        <!-- 还可以连续写 -->
         <a href="http://www.atguigu.com" @click.prevent.stop="tipInfo">点我提示信息</a>
    </div>
    <!-- 事件只触发一次 -->
    <button @click.once="tipInfo">点我提示信息</button>
<!--   keyup表示键盘按键抬起事件,keydown表示键盘按下事件-->
    <input type="text" placeholder="按下回车时提示输入" @keydown.enter="tipInfo">
    <input type="text" placeholder="按下回车按键抬起时提示输入" @keyup.enter="tipInfo2($event,'hello')">
</div>
<script>
    let a = {
        name: '青岛理工大学',
        address: '山东青岛'
    }
    const vm = new Vue({
        el: '#app',
        data: a,
        methods:{
            // 不传参
            tipInfo(event){
                console.log(event)
                console.log(this)  // this 指向vm
                alert(`欢迎来到${this.name}`)
            },
            // 传参
            tipInfo2(event,value){
                console.log(event.target.innerText)
                console.log(this)  // this 指向vm
                console.log(value)  // 'hello'
                alert( value + `欢迎来到${this.address}`)
            },
        }
    })
    // console.log(vm._data === a) // true

</script>
</body>

</html>
